<template>
	<view>
		<cu-custom bgColor="bg-gradual-blue" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">登陆</block>
		</cu-custom>

		<view class="content">
			<view class="input-group">
				<view class="input-row border">
					<text class="title">工号：</text>
					<m-input class="m-input" type="text" clearable focus v-model="workno" placeholder="请输入工号"></m-input>
				</view>
				<view class="input-row">
					<text class="title">姓名：</text>
					<m-input type="m-input" displayable v-model="name" placeholder="请输入姓名"></m-input>
				</view>
			</view>
			<view class="btn-row"><button type="primary" class="primary" @tap="bindLogin">登录</button></view>
			<!-- <view class="action-row">
            <navigator url="../reg/reg">注册账号</navigator>
            <text>|</text>
            <navigator url="../pwd/pwd">忘记密码</navigator>
        </view> -->
		</view>
	</view>
</template>

<script>
import service from '../../service.js';
import { mapState, mapMutations } from 'vuex';
import mInput from '../../components/m-input.vue';

export default {
	components: {
		mInput
	},
	data() {
		return {
			providerList: [],
			hasProvider: false,
			workno: '',
			name: '',
			positionTop: 0
		};
	},
	computed: mapState(['forcedLogin']),
	methods: {
		...mapMutations(['login']),
		initPosition() {
			/**
			 * 使用 absolute 定位，并且设置 bottom 值进行定位。软键盘弹出时，底部会因为窗口变化而被顶上来。
			 * 反向使用 top 进行定位，可以避免此问题。
			 */
			this.positionTop = uni.getSystemInfoSync().windowHeight - 100;
		},
		bindLogin() {
			let data = {
				workno: this.workno,
				name: this.name
			};
			data = encodeURI(JSON.stringify(data));
			uni.request({
				url: '/examonline/mobile/doLogin', //仅为示例，并非真实接口地址。
				data: {
					data
				},
				dataType: 'GET',
				success: res => {
					let resdata = JSON.parse(res.data);
					if (resdata.result) {
						this.toMain(resdata.data);
					} else {
						uni.showToast({
							icon: 'none',
							title: '用户账号或密码不正确'
						});
					}
				}
			});
		},
		toMain(user) {
			this.login(user);
			if (this.forcedLogin) {
				uni.reLaunch({
					url: '../main/main'
				});
			} else {
				uni.navigateBack();
			}
		}
	},
	onReady() {
		this.initPosition();
	}
};
</script>

<style>
.action-row {
	display: flex;
	flex-direction: row;
	justify-content: center;
}

.action-row navigator {
	color: #007aff;
	padding: 0 20upx;
}

.oauth-row {
	display: flex;
	flex-direction: row;
	justify-content: center;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}

.oauth-image {
	width: 100upx;
	height: 100upx;
	border: 1upx solid #dddddd;
	border-radius: 100upx;
	margin: 0 40upx;
	background-color: #ffffff;
}

.oauth-image image {
	width: 60upx;
	height: 60upx;
	margin: 20upx;
}
</style>
